{% extends '::base.html.twig' %}
{% block stylesheets %}
<link href="{{ asset('bundles/histclinica/css/bootstrap.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/histclinica/css/bootstrap-theme.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/histclinica/css/navbar.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/histclinica/css/general.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/histclinica/css/fullcalendar.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/histclinica/css/fullcalendar.print.css') }}" rel="stylesheet" media="print" />
<link href="{{ asset('bundles/histclinica/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" type="text/css" />
<style>

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
        {% endblock %}
{% block javascripts %}
    <script src="{{ asset('bundles/histclinica/js/moment.min.js') }}"></script>
    <script src="{{ asset('bundles/histclinica/js/jquery.js') }}"></script>
    <script src="{{ asset('bundles/histclinica/js/bootstrap.js') }}"></script>
    <script src="{{ asset('bundles/histclinica/js/fullcalendar.js') }}"></script>
    <script src="{{ asset('bundles/histclinica/js/es.js') }}"></script>
    <script src="{{ asset('bundles/histclinica/js/bootstrap-datetimepicker.min.js') }}"></script>

    <script language="javascript" type="text/javascript">
        var _actualEvent = null;
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },                
                lang: 'es',
                defaultView: 'agendaWeek',
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                allDaySlot: false, 
                slotDuration: '00:30:00',                
                events: {
                    url: '{{path('disponibilidad_getEvents', { 'id': idmedico, 'conttype': 1 } )}}',                    
                    error: function() {
                            $('#script-warning').show();
                    }   
                },
                eventClick: function(calEvent, jsEvent, view) {
                    var htmlDescription = "<table cellpadding='5px'><tr><td style='padding-right: 20px;'>Inicia: </td><td>" + calEvent.start.format('HH:mm') + "</td><td style='padding-right: 20px; padding-left: 30px;'> Finaliza: </td><td>" + calEvent.end.format('HH:mm') + "</td></tr>";
                    if(calEvent.title !== '')
                    {
                        htmlDescription = htmlDescription + '<tr><td colspan="4">Este evento es recurrente: </td></tr>'
                        htmlDescription = htmlDescription +  expandirDias(calEvent.title.replace("Desde:","<tr><td style='padding-right: 20px;'>@esde:</td><td>").replace("Hasta:", "</td><td style='padding-right: 20px; padding-left: 30px;'> Hasta:</td><td>").replace("Días: ", "</td></tr><tr><td style='padding-right: 20px;'>@ías: </td><td  colspan='3' >") + "</td></tr>").replace("@","D").replace("@","D");
                    }
                    else{
                        htmlDescription = htmlDescription + '<tr><td colspan="4">Este evento NO es recurrente </td></tr>'        
                    }
                    
                    htmlDescription = htmlDescription + "</table>"
                    jQuery("#dispoDescription").html(htmlDescription);
                    jQuery("#deleteDispButton").attr('eventId', calEvent.id);
                    $("#detailsModal").modal('show');
                    $(this).css('background-color', '#ddd');
                    _actualEvent = $(this);
                },
                selectable: true,
                selectHelper: true,
                select: function(start, end) {
                    if(start.format('YYYY-MM-DD') !== end.format('YYYY-MM-DD')){
                        jQuery("#informativeBody").html('<h4>¡No es posible registrar disponibilidades con fecha de inicio y fin diferentes!</h4>');
                        jQuery("#informativeModal").modal('show');
                        return;
                    }                         
                    jQuery("input[name='fechaInicio']").val(start.format('YYYY-MM-DD'));
                    jQuery("input[name='fechaFin']").val(end.format('YYYY-MM-DD'));                        
                    jQuery("input[name='horaInicio']").val(start.format('HH:mm'));
                    jQuery("input[name='horaFin']").val(end.format('HH:mm'));
                    jQuery("#recurrente").removeAttr('checked');
                    alterDisplayRecurrence();
                    clearChecks();
                    marcarCheks(start);
                    jQuery("#myModal").modal('show');
                },      
                 
            });
        });
        
        jQuery(document).ready(function() {
            jQuery('#datetimepickerInicio, #datetimepickerFin').datetimepicker({
                pickTime: false
            });
            jQuery('#timepickerInicio, #timepickerFin').datetimepicker({
                pickDate: false
            });
            
            jQuery('#deleteDispButton').click(function() {
                if(!confirm('¿Esta seguro de borrar la disponibilidad?')) return;
                jQuery.post('{{path('disponibilidad_deletedispo')}}',
                        {eventid: jQuery(this).attr('eventId') },
                        function(response) {
                            $('#calendar').fullCalendar('refetchEvents'); // stick? = true
                        }, "json");
                jQuery("#detailsModal").modal('hide');
            });
            
            jQuery('#closeDispButton').click(function() {                
                jQuery("#detailsModal").modal('hide');
                if(_actualEvent !== null){
                     _actualEvent.css('background-color', '#428BCA');
                }
            });
            
            
            jQuery('#saveDispButton').click(function() {
                
                var fechaInicio = jQuery('#fechaInicio').val();
                var fechaFin = jQuery('#fechaFin').val();
                var horaInicio =  jQuery('#horaInicio').val() + ':00';
                var horaFin = jQuery('#horaFin').val() + ':00';
                var dias = obtenerDia();                
                var medicoId = jQuery('#medicoId').val();                
                
                jQuery.post('{{path('disponibilidad_register')}}',
                        {fechaInicio: fechaInicio, fechaFin: fechaFin, horaInicio: horaInicio, horaFin: horaFin, dias: dias, medicoId: medicoId},
                        function(response) {
                            $('#calendar').fullCalendar('refetchEvents'); // stick? = true
                        }, "json");
                jQuery("#myModal").modal('hide');
            });
        });

        function marcarCheks(vfecha){
            var fecha = new Date(vfecha.format('YYYY-MM-DD'));
            var dia = fecha.getDay();
            if(dia === 0){ jQuery('#chklunes').prop( "checked", true ); }
            if(dia === 1){ jQuery('#chkmartes').prop( "checked", true ); }
            if(dia === 2){ jQuery('#chkmiercoles').prop( "checked", true ); }
            if(dia === 3){ jQuery('#chkjueves').prop( "checked", true ); }
            if(dia === 4){ jQuery('#chkviernes').prop( "checked", true ); }
            if(dia === 5){ jQuery('#chksabado').prop( "checked", true ); }
            if(dia === 6){ jQuery('#chkdomingo').prop( "checked", true ); }            
        }

        function obtenerDia(){
            var diasValue = 1;
            if( jQuery('#chklunes').is(':checked') ){diasValue = diasValue * 2;}
            if( jQuery('#chkmartes').is(':checked') ) {diasValue = diasValue * 3;}
            if( jQuery('#chkmiercoles').is(':checked') ) {diasValue = diasValue * 5;}
            if( jQuery('#chkjueves').is(':checked') ) {diasValue = diasValue * 7;}
            if( jQuery('#chkviernes').is(':checked') ){ diasValue = diasValue * 11;}
            if( jQuery('#chksabado').is(':checked') ) {diasValue = diasValue * 13;}
            if( jQuery('#chkdomingo').is(':checked') ) {diasValue = diasValue * 17;}
            
            return diasValue;
        }

        function alterDisplayRecurrence(valorcheck){
            if(valorcheck === undefined)
            {
                 valorcheck = jQuery("#recurrente").get(0).checked;
            }
            jQuery("[tag='forRecurrence']").each(function(){                
                if(valorcheck)
                {
                    jQuery(this).css('visibility', 'visible');
                    jQuery(this).css('display', 'block');
                    jQuery(this).attr('status', 'visible');
                }
                else
                {
                    jQuery(this).css('visibility', 'hidden');
                    jQuery(this).css('display', 'none');
                    jQuery(this).attr('status', 'hidden');
                }
                
            });
        }
        
        function clearChecks(){
            jQuery("input[tag='chkdia']").removeAttr('checked');
        }
        
        function expandirDias(texto){
            texto = texto.replace('L', 'Lunes');
            texto = texto.replace('Ma', 'Martes');
            texto = texto.replace('Mi', 'Miércoles');
            texto = texto.replace('J', 'Jueves');
            texto = texto.replace('V', 'Viernes');
            texto = texto.replace('S', 'Sábado');
            texto = texto.replace('D', 'Domingo');
            return texto;
        }

        </script>

{% endblock %}

{% block body -%}
        <input type="hidden" value="{{ idmedico }}" id="medicoId" name="medicoId">
        <!-- Popup para presentar informacion al usuario -->
        <div id="informativeModal" class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header" style="text-align: center" >
                <h3>Aviso</h3>
            </div>
            <!-- dialog body -->
            <div class="modal-body" id="informativeBody">
              
            </div>
            <!-- dialog buttons -->
            <div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">Aceptar</button></div>
          </div>
        </div>
      </div>
        <!-- Popup para registrar una nueva disponibilidad -->
        <div id="myModal" class="modal fade">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header" style="text-align: center">
                        <h3>Registrar Disponibilidad</h3>
                    </div>
                    <div class="modal-body" style="margin-left:10px; margin-right: 10px;">
                        
                        <div class="row">
                            <div class="col-md-1">Hora: </div>
                            <div class="col-md-3" style="white-space: nowrap;">
                                <div style="" id="timepickerInicio" class="input-append date">
                                    <input data-format="hh:mm" type="text" name="horaInicio" id="horaInicio" ></input>
                                    <span class="add-on">
                                        <img src="{{ asset('bundles/histclinica/images/calendar.png') }}">
                                    </span>
                                </div>

                            </div>
                            <div class="col-md-1">hasta</div>
                            <div class="col-md-3" style="white-space: nowrap;">
                                <div style="" id="timepickerFin" class="input-append date">
                                    <input data-format="hh:mm" type="text" name="horaFin" id="horaFin" ></input>
                                    <span class="add-on">
                                        <img src="{{ asset('bundles/histclinica/images/calendar.png') }}">
                                    </span>
                                </div>                    
                            </div>
                        </div>
                        
                        
                        <div class="row">
                            <div class="col-md-8">Disponibilidad recurrente? <input type="checkbox" id="recurrente" name="recurrente" onclick="javascript: alterDisplayRecurrence(); "/> </div>
                        </div>
                        
                        <div class="row" style="display: none; visibility: hidden;" tag="forRecurrence"  status="hidden" >
                            <div class="col-md-1">Fecha: </div>
                            <div class="col-md-3" style="white-space: nowrap;">
                                <div style="" id="datetimepickerInicio" class="input-append date">
                                    <input data-format="yyyy-MM-dd" type="text" name="fechaInicio" id="fechaInicio" ></input>
                                    <span class="add-on">
                                        <img src="{{ asset('bundles/histclinica/images/calendar.png') }}">
                                    </span>
                                </div>

                            </div>
                            <div class="col-md-1">hasta</div>
                            <div class="col-md-3" style="white-space: nowrap;">
                                <div style="" id="datetimepickerFin" class="input-append date">
                                    <input data-format="yyyy-MM-dd" type="text" name="fechaFin" id="fechaFin" ></input>
                                    <span class="add-on">
                                        <img src="{{ asset('bundles/histclinica/images/calendar.png') }}">
                                    </span>
                                </div>                    
                            </div>
                        </div>
                        
                        <div class="row" style="display: none; visibility: hidden;" tag="forRecurrence" status="hidden" >
                            <div class="col-md-1">Días: </div>
                            <div class="col-md-10"><input type="checkbox" value="2" id="chklunes" tag="chkdia" /> Lunes &nbsp;&nbsp;<input type="checkbox" value="3" id="chkmartes"  tag="chkdia" /> Martes&nbsp;&nbsp;<input type="checkbox" value="5" id="chkmiercoles" tag="chkdia"  /> Miercoles&nbsp;&nbsp;<input type="checkbox" value="7" id="chkjueves"  tag="chkdia"  /> Jueves&nbsp;&nbsp;<input type="checkbox" value="11" id="chkviernes" tag="chkdia"  /> Viernes&nbsp;&nbsp;<input type="checkbox" value="13" id="chksabado" tag="chkdia"  /> Sábado&nbsp;&nbsp;<input type="checkbox" value="17" id="chkdomingo" tag="chkdia"  /> Domingo</div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-primary" id="saveDispButton">Guardar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Popup para visualizar una disponibilidad -->
        <div id="detailsModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="text-align: center">
                        <h3>Detalles de Disponibilidad</h3>
                    </div>
                    <div class="modal-body" style="margin-left:10px; margin-right: 10px;" id="dispoDescription">
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="closeDispButton" >Cerrar</button>
                        <button type="button" class="btn btn-primary" id="deleteDispButton">Borrar</button>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-bottom: 10px;">
        <div style="background-color: #1CA9A3; border-radius: 8px; text-align: center; color: white; padding-top: 3px; padding-bottom: 3px;  width: 900px; margin: 0 auto; ">
                   <h3>Disponibilidad de m&eacute;dico</h3>
        </div>
                </div>
                
        <div id='calendar'></div>

{% endblock %}
